<template>
  <div>
    <div id="bar-echarts" style="width:6-7px;height:360px;" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'BarEcharts',
  props: {
    orderBydayList: {
      type: Array,
      default: function() {
        return []
      }
    },
    orderReturnBydayList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  mounted() {
    var chartDom = document.getElementById('bar-echarts')
    var myChart = echarts.init(chartDom)
    var option
    var x = this.orderReturnBydayList.map(ele => ele.date)
    var returnOrder = this.orderReturnBydayList.map(ele => ele.count)
    var order = this.orderBydayList.map(ele => ele.count)
    option = {
      title: {
        text: '订单退单柱状图',
        textStyle: {
          color: '#96a4cf'
        }
      },
      legend: {
        textStyle: {
          color: '#8c9ac4'
        }
      },
      xAxis: {
        type: 'category',
        data: x,
        grid: {
          show: false
        }
        // 标签旋转
        // axisLabel: {
        //   rotate: 40
        // }
      },

      yAxis: {
        show: true,
        type: 'value',
        axisLine: {
          show: true
        },
        splitLine: {
          show: false
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0,0,0,.8)',
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          name: '订单',
          data: order,
          type: 'bar',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#7c08db' // 0% 处的颜色
                },
                {
                  offset: 0.5,
                  color: '#b700fa' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#b307da' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        {
          name: '退单',
          data: returnOrder,
          type: 'bar',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#24c8ff' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#2492fd' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        }
      ]
    }

    option && myChart.setOption(option)
  }
}
</script>

<style>
</style>
